<template>
    <div class="message">
        <Header></Header>
        <div class="message-content-box">
            <div class="message-content">
                <div class="header">
                  <div class="title">我的消息</div>
                  <el-breadcrumb separator="/" class="other">
                      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                      <el-breadcrumb-item :to="{ path: '/studyCenter' }">会员中心</el-breadcrumb-item>
                      <el-breadcrumb-item>消息列表</el-breadcrumb-item>
              
                  </el-breadcrumb>
                </div>
                <el-table stripe class="message-table" :data="tableData" style="width: 100%">
                    <el-table-column label="消息标题">
                        <template slot-scope="scope">
                            <div>
                                <span class="icon-txt">已读</span>
                                <a style="margin-left: 10px" @click="goMessageDetail(scope.row.name)">{{ scope.row.name }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布时间" width="180">
                        <template slot-scope="scope">
                            <div style="text-align:center">{{scope.row.date}}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="content-footer">
                    <el-pagination
                        :current-page="currentPage"
                        :page-size="pageSize"
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="total"
                    ></el-pagination>
                    <div class="recordSum">共{{total}}条记录</div>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from "../../../components/common/header.vue";
import Footer from "../../../components/common/footer.vue";
export default {
  name: "message",
  components: {
    Header,
    Footer
  },
  data() {
    return {
      currentPage: 0,
      pageSize: 8,
      total: 10,
      tableData: [
        {
          date: "2019-04-26 10:48:05",
          name: "初级冲刺串讲班直播课开始啦！",
          address: ""
        },
        {
          date: "2016-05-04",
          name: "网站维护通知",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-03",
          name: "网站维护通知",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {
    handleCurrentChange(currentIdx) {//分页页数改变
      console.log(currentIdx);
    },
    goMessageDetail(e){//跳转到消息详情
      let routerUrl = this.$router.resolve({
        path:'messageDetail',
      })
      window.open(routerUrl.href, '_blank');
    },
  }
};
</script>

<style lang="scss">
// 修改element 样式
.el-table th > .cell {
  text-align: center;
  font-size: 15px;
  color: #333;
}
.el-table__header-wrapper {
  background-color: #f9f9f9 !important;
  border-top: 1px solid #ddd !important;
  border-bottom: 1px solid #ddd !important;
}
// footer element
// 修改element 样式
.el-pager li.active {
  background-color: #409eff;
  cursor: default;
  color: white !important;
}
.el-pager li {
  border: 1px solid #ccc;
  margin-right: 5px !important;
}
.el-pager li.active + li {
  border: 1px solid #ccc !important;
}
.el-table th{
  background: #f1f1f1!important;
}
// 主体
.message {
  background-image: url();
  background-color: white;
  .message-content-box {
    width: 100%;
    flex-grow: 1;
    .message-content {
      .header {
        //列表头部
        padding-top: 26px;
        display:flex;
        align-items: center;
        .title {
          font-weight: 600;
          font-size: 20px;
        }
         .other {
          margin: 8px 0 0 20px;
          .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
              font-weight: 700;
              color: #0e90d2;
          }
          .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
              color: #0e90d2;
          }
        }
        
      }
      width: 1210px;
      margin: 0 auto;
      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
      background-color: #fff;
      border: 1px solid transparent;
      border-radius: 0;
      height: auto;
      margin-top: 30px;
      margin-bottom: 5px;
      padding: 30px 20px 10px;
      .message-table {
        width: 100%;
      }
      a {
        cursor: pointer;
      }
      .icon-txt {
        display: inline-block;
        min-width: 10px;
        padding: 0.25em 0.625em;
        font-size: 1.2rem;
        font-weight: 700;
        color: #fff;
        line-height: 1;
        vertical-align: baseline;
        white-space: nowrap;
        background-color: #999;
      }
    }
  }
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  .content-footer {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    .recordSum {
      list-style: none;
      color: #999;
    }
  }
}
</style>

